<template>
  <div class="out">
    <div class="bigTitle">
      <div class="title">{{ showPaper[0].paperTitle }}</div>
      <div class="intro">{{ showPaper[0].paperIntro }}</div>
      <span class="category">{{ showPaper[0].pageviews }}</span>
      <span class="release_time">{{ showPaper[0].create_time }}</span>
    </div>
    <!-- 文章内容 -->
    <div class="content">
    </div>
    <!-- 三个小球 -->
    <div class="circle1"></div>
    <div class="circle2"></div>
    <div class="circle3"></div>
  </div>
</template>

<script>
import { mapState } from "vuex";

export default {
  name: "showPaper",
  data() {
    return {
      paper_id: "", //对应文章的id
      showPaper: "", //要展示的文章
    };
  },
  created() {
    this.paper_id = this.$route.params.id;
    // 发送请求，获取id对应的文章
    this.$store.dispatch("getAllPapers");
  },
  mounted() {
    // 这里可以获取到DOM元素
    // 遇到的问题就是mounted只会执行一次，当created异步请求的数据还没有回来的时候，
    // mounted就已经执行了，导致拿不到数据，所以这里设置一个简短的定时器
    this.$nextTick(() => {
      setTimeout(() => {
        this.showPaper = this.showAllPapers.filter((item) => {
          return item.id == this.paper_id;
        });
      }, 1000);
    });
  },

  methods: {},
  computed: {
    ...mapState({
      showAllPapers: (state) => state.papers.showAllPapers,
    }),
  },
};
</script>

<style lang="less" scoped>
.out {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .bigTitle {
    width: 1000px;
    margin-top: 80px;
    .title {
      font-size: 30px;
      margin-bottom: 10px;
    }
    .intro {
      font-size: 20px;
      margin-bottom: 10px;
      margin-left: 30px;
    }
    .category,
    .release_time {
      padding: 10px;
      font-size: 16px;
    }
  }
  .content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 1000px;
    border-radius: 25px;
    margin: auto;
    margin-top: 40px;
    padding: 20px;
    border-radius: 20px;
    /* 设置渐变色 */
    background: linear-gradient(
      to right,
      rgba(66, 12, 12, 0.4),
      rgba(255, 255, 255, 0.3),
      rgba(255, 255, 255, 0.2)
    );
    /* *****重点：使元素背景模糊化，backdrop-filter 是使透过该层的底部元素模糊化，值越大越模糊，注意区别于filter */
    backdrop-filter: blur(10px);
    /* filter是使该元素本身模糊化 */
    /* filter: blur(10px); */
    /* 设置上高光和左高光 */
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    border-left: 1px solid rgba(255, 255, 255, 0.5);
  }
  /* 设置那几个球 */
  .circle1 {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    /* 相对于父元素的绝对定位 */
    position: fixed;
    top: 180px;
    left: 180px;
    background: rgba(186, 248, 227, 0.7);
    z-index: -99;
  }
  .circle2 {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    /* 相对于父元素的绝对定位 */
    position: fixed;
    top: 430px;
    left: 400px;
    background: rgba(232, 250, 201, 0.7);
    z-index: -99;
  }
  .circle3 {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    /* 相对于父元素的绝对定位 */
    position: fixed;
    top: 250px;
    left: 1100px;
    background: rgba(149, 200, 241, 0.7);
    z-index: -99;
  }
}
</style>